import React from 'react'
import {Tabs,Select,Table, Divider, Tag,Modal,Button,message} from 'antd';
import './index.less';
import axios from 'axios';
import {PATH,IP} from '../../../../../utils/urls';
import {createHashHistory} from 'history';
const { TabPane } = Tabs;
const { Option } = Select;
import BreadcrumbCustom from "../../../../../components/BreadcrumbCustom";

export default class EquipmentParamsSetup extends React.Component {
    columnsArray = [
        {
            title: 'id',
            dataIndex: 'id',
            key: 'id',
        },{
            title: '数据项',
            dataIndex: 'monitorTypeDictName',
            key: 'monitorTypeDictName',
        },{
            title: 'OID',
            dataIndex: 'oid',
            key: 'oid',
        },{
            title: '描述',
            dataIndex: 'remark',
            key: 'remark',
        },{
            title: '管理',
            key: 'tags',
            dataIndex: 'tags',
            render: (tags,data) => (
                <span>
            {tags.map((tag,index) => {
                if(index ==0){
                    return (
                        <span key={index}><a href="javascript:void(0);" onClick={this.actionClick.bind(this,{tag},{index},{data})}>{tag}</a>
                        <Divider type="vertical" /></span>
                    );
                }else{
                    return (
                        <span key={index}><a href="javascript:void(0);" onClick={this.actionClick.bind(this,{tag},{index},{data})}>{tag}</a></span>
                    );
                }
            })}
          </span>
            ),
        },
    ];
    constructor(props) {
        super(props);
        this.state = {
            tabsPostion:"1",//tabs选中索引
            hardWareArray:[],//硬件资源
            softWareArray:[]//软件资源
        };
    }

    componentDidMount() {
        console.log(this.props);
        let currentAppId = localStorage.getItem("softIdCurrent");
        if(this.props.location.state == null && currentAppId==null){
            return;
        }
        let appId = currentAppId;
        let name = "";
        let resouceType = "";
        console.log(currentAppId);
        if(this.props.location.state){
            appId = this.props.location.state.appId
            name = this.props.location.state.name;
            resouceType = this.props.location.state.resouceType;
        }else if(currentAppId){
            appId = currentAppId;
        }
        this.setState({
            appId:appId,
            name:name,
            resouceType:resouceType
        })
        //获取数据项列表
        if(appId!=""){
            this.resourceGatherConf(appId);
        }
    }

    /**
     * 获取数据项列表
     * @returns
     */
    resourceGatherConf(id) {
        axios.post(PATH.resourceGatherConf, {
            isSoftware:0,
            resourceId:id
        })
            .then(response => {
                console.log(response);
                if (response.data.code == 0) {
                    let dataArray = response.data.data;
                    console.log(response.data.data);
                    for(let i = 0;i<dataArray.length;i++){
                        dataArray[i].key = i;
                        dataArray[i].tags = ["修改","删除"];
                    }
                    console.log(dataArray);
                    this.setState({
                        hardWareArray:dataArray
                    })
                }
            });
    }

    /**
     * 获取软件列表
     * @returns {*}
     */
    getSoftWareResource(){
        axios.post(PATH.softwareResource, {
            // hardwareId: this.state.resourceArray[props].data[0].id
        }).then(response => {
            let dataArray = response.data.data;
        })
    }

    /**
     * 点击操作功能
     * @returns {*}
     */
    actionClick = (props0,props1,props2) => {
        console.log(props0);
        console.log(props1);
        console.log(props2);
        let path = {
            state:{
                appId:props2.data.id,
                name:props2.data.monitorTypeDictName,
                resouceType:props2.data.monitorTypeDictId,
                data:props2
            },
        }
        switch (props1.index) {
            //修改
            case 0:
                path.pathname='/editresourcegatherconf';
                break;
            //删除
            case 1:
                Modal.confirm({
                    title: "提示",
                    content: '是否确认删除？',
                    onOk:this.delectAreaSceneFun.bind(this,props0,props1,props2),
                    okText: '确认',
                    cancelText: '取消',
                });
                break;
            default:
                break;
        }
        this.props.history.push(path);
    }

    /**
     * 删除区域场景
     * @returns {*}
     */
    delectAreaSceneFun(props0,props1,props2){
        console.log(props2);
        axios.post(PATH.resourceGatherConfRemove+"?ids="+props2.data.id,{
        },{headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(response=>{
            console.log(response);
            if(response.data.code == 0){
                message.success(response.data.msg);
            }else{
                message.error(response.data.msg);
            }
        })
    }

    /**
     * 添加数据项
     * @returns {*}
     */
    addSoftWareResource = () => {
       let path = {};
       path.pathname = "editresourcegatherconf";
       this.props.history.push(path);
    }

    /**
     * 返回
     * @returns {*}
     */
    backFun=()=>{
        let path={
            pathname:"equipmentmanager"
        }
        this.props.history.push(path);
    }

    render() {
        return (
            <div>
                <BreadcrumbCustom first="资源配置" second="管理设备参数" />
                <div className="shuJuXiangDiv">
                    <Button className="shuJuXiangBtn" onClick={this.addSoftWareResource} style={{display:this.state.selectOrButtonShow}}>添加数据项</Button>
                    <Button onClick={this.backFun} className="shuJuXiangBtn">返回</Button>
                </div>
                <Table className= "reasureManagerClass" columns={this.columnsArray} dataSource={this.state.hardWareArray} bordered />
            </div>
        )
    }
}